<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>抚乐酒吧</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../styles/common.css"/>
    <link rel="stylesheet" href="../styles/index.css"/>
    <link rel="stylesheet" href="../styles/icon/iconfont.css"/>
    <style>
        .body {
            min-width: 1366px;
        }

        .carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 100;
            background-color: rgba(0,0,0,0.3);
            color: white;
            border: none;
            font-size: 24px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            pointer-events: auto;
        }

        .prev-btn {
            left: 20px;
        }

        .next-btn {
            right: 20px;
        }

        .app-bgScrolling-main {
            height: 100vh;
            width: 100vw;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 0;
        }

        .app-bgScrolling-main .divTmp {
            width: 100%;
            height: 100%;
        }

        .barrage-container {
            position: absolute;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            pointer-events: none;
            right: 0;
            z-index: 1;
        }

        .barrage-item {
            position: absolute;
            white-space: nowrap;
            color: #fff;
            text-shadow: 1px 1px 2px #000;
            animation: barrageMove linear;
        }

        .home-button {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 999;
        }

        @keyframes barrageMove {
            from {
                transform: translateX(100vw);
            }
            to {
                transform: translateX(-100%);
            }
        }
    </style>
</head>

<body>
<div class="app-bgScrolling" id="app-bgScrolling">
    <el-button type="primary" class="home-button" @click="goToHome" v-show="showHomeButton">返回首页</el-button>
    <div class="app-bgScrolling-main">
        <el-carousel :interval="10000" height="100vh" ref="carousel">
            <el-carousel-item v-for="item in carouselItems" :key="item.id">
                <img :src="item.url" style="width:100%;height:100%;object-fit:cover;">
            </el-carousel-item>
        </el-carousel>

    </div>
    <div class="barrage-container" id="barrageContainer"></div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../api/manage.js"></script>
<script>
    new Vue({
        el: '#app-bgScrolling',
        data() {
            return {
                barrages: [],
                timer: null,
                carouselItems: [],
                showHomeButton: true,
                mouseTimer: null
            }
        },
        computed: {},
        created() {
            this.initData()
        },
        beforeDestroy() {
            if (this.timer) {
                clearInterval(this.timer);
            }
        },
        mounted() {
            this.startBarrage();
            this.setupMouseListeners();
        },
        methods: {
            prevSlide() {
                this.$refs.carousel.prev();
            },
            nextSlide() {
                this.$refs.carousel.next();
            },
            setupMouseListeners() {
                document.addEventListener('mousemove', () => {
                    this.showHomeButton = true;
                    if (this.mouseTimer) {
                        clearTimeout(this.mouseTimer);
                    }
                    this.mouseTimer = setTimeout(() => {
                        this.showHomeButton = false;
                    }, 3000);
                });
            },
            goToHome() {
                window.location.href = '../index.html';
            },
            initData() {
                getImageList().then(res => {
                    res = res.data;
                    if (res.code === 1) {
                        this.carouselItems = res.data.map(item => {
                            return {
                                id: item.id,
                                url: this.getImage(item.image)
                            }
                        });
                    }
                })
                getScrollingList({type: 0}).then(res => {
                    res = res.data;
                    if (res.code === 1) {
                        this.barrages = res.data.map(item => {
                            return item.content
                        });
                    }
                })
            },
            getImage(image) {
                return `/common/download?name=${image}`
            },
            startBarrage() {
                const container = document.getElementById('barrageContainer');
                const height = container.clientHeight;

                this.timer = setInterval(() => {
                    const barrage = document.createElement('div');
                    barrage.className = 'barrage-item';

                    // 随机选择一条弹幕
                    const text = this.barrages[Math.floor(Math.random() * this.barrages.length)];
                    barrage.textContent = text;

                    // 随机位置、动画时间和颜色
                    const top = Math.random() * (height - 30);
                    const left = Math.random() * window.innerWidth;
                    const duration = 8 + Math.random() * 7;
                    const r = Math.floor(Math.random() * 256);
                    const g = Math.floor(Math.random() * 256);
                    const b = Math.floor(Math.random() * 256);

                    barrage.style.top = `${top}px`;
                    barrage.style.left = `${left}px`;
                    barrage.style.animationDuration = `${duration}s`;
                    barrage.style.color = `rgb(${r}, ${g}, ${b})`;
                    barrage.style.fontSize = `${12 + Math.random() * 20}px`;

                    container.appendChild(barrage);

                    // 动画结束后移除元素
                    barrage.addEventListener('animationend', () => {
                        barrage.remove();
                    });
                }, 1000);
            }
        }
    })
</script>
</body>
</html>
